<template>
    <div>
        <v-toolbar dark color="primary" style="box-shadow:none">
            <v-icon @click="$router.back(-1)">keyboard_arrow_left</v-icon>
            <v-toolbar-title style="margin:0">发布服务</v-toolbar-title>
        </v-toolbar>
        <v-container style="margin-bottom:48px">
            <v-layout row wrap>
                <v-flex xs12>
                    <v-text-field clearable placeholder="输入商家名称" v-model="name" solo style="margin:0"></v-text-field>
                </v-flex>
                <v-flex xs12>
                    <v-text-field clearable placeholder="输入商家电话" v-model="phone" solo style="margin:0"></v-text-field>
                </v-flex>
                <v-flex xs12 class="purchase_content">
                    <v-textarea outline auto-grow placeholder='输入商家详情' v-model="detail" class="purchase"></v-textarea>
                    <v-layout row wrap>
                        <v-flex text-xs-center xs3 v-for="(value,index) in purchaseImgs" :key=index style="display:inline-block;position:relative">
                            <v-icon style="position:absolute;right:0px" @click="deleteImg(index)">clear</v-icon>
                            <img style="height:65px;width:65px" :src=value>
                        </v-flex>
                        <v-flex xs3>
                            <div style="background:#eeeeee; height:65px;width:65px;margin:auto" @click="selectImg">
                                <v-icon large style="position:relative;top:23%;left:24%" >add</v-icon>
                            </div>
                        </v-flex>
                        <input type="file" style="display:none" ref='file' @change="selectFile">

                    </v-layout>
                </v-flex>
                <v-flex xs12 style="margin:10px 0 5px 0">
                    <v-icon>place</v-icon>
                    <span>{{community}}</span>
                </v-flex>
                <v-flex>
                <v-list style="padding:10px 0 0 0">
                    <v-list-tile @click="priceSheet=true">
                        <v-list-tile-content>
                            <v-list-tile-title>{{priceChoice.title}}</v-list-tile-title>
                        </v-list-tile-content>
                        <v-list-tile-action>
                            <span style="font-size:15px;color:#757575">{{priceChoice.result}}</span>
                        </v-list-tile-action>
                        <v-list-tile-action>
                            <v-icon color="primary">keyboard_arrow_right</v-icon>
                        </v-list-tile-action>
                    </v-list-tile>
                    <v-divider></v-divider>
                    <v-dialog v-model="priceSheet" persistent>
                        <v-card>
                            <v-card-title><span class="headline">请输入商家价格</span></v-card-title>
                            <v-card-text>
                                <v-text-field required prefix="￥" v-model="price"></v-text-field>
                            </v-card-text>
                            <v-card-actions>
                                <v-spacer></v-spacer>
                                <v-btn color="primary" flat @click.native="priceSheet=false" @click="price=priceChoice.result">取消</v-btn>
                                <v-btn color="primary" flat @click.native="priceSheet=false" @click="select(priceChoice,price)">确定</v-btn>
                            </v-card-actions>
                        </v-card>
                    </v-dialog>
                        <v-list-tile @click="type.bottomSheet=true">
                            <v-list-tile-content>
                                <v-list-tile-title>{{type.title}}</v-list-tile-title>
                            </v-list-tile-content>
                            <v-list-tile-action>
                                <span style="font-size:15px;color:#757575">{{type.result}}</span>
                            </v-list-tile-action>
                            <v-list-tile-action>
                                <v-icon color="primary">keyboard_arrow_right</v-icon>
                            </v-list-tile-action>
                        </v-list-tile>
                        <v-divider></v-divider>
                        <v-bottom-sheet v-model="type.bottomSheet">
                            <v-list>
                                <v-list-tile v-for="(value,index) in type.content" :key=index @click="select(type,value)">
                                    <v-list-tile-title>{{value}}</v-list-tile-title>
                                    <v-divider></v-divider>
                                </v-list-tile>
                            </v-list>
                        </v-bottom-sheet>
                </v-list>
                </v-flex>
            </v-layout>
        </v-container>
        <div flat style="z-index:1;position:fixed;bottom:0;width:100%">
            <v-layout justify-center align-center style="background:#eeeeee">
            <v-flex text-xs-center style="background:#4caf50">
                <v-btn color="white" flat value="person" style="width:100%;">
                    <span>确认发布</span>
                </v-btn>
            </v-flex>
            </v-layout>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            community:'国际软件学院',
            purchaseImgs:[],
            files:[],
            priceChoice:{title:'价格',bottomSheet:false,result:''},
            priceSheet:false,
            type:{title:'种类',content:['教育培训','生活服务','医疗健康','小吃快餐','休闲运动','其它'],bottomSheet:false,result:''},
            
            price:'',
            serviceType:'',
            name:'',
            phone:'',
            detail:'',
        }
    },
    methods:{
        select(choice,value){
            choice.bottomSheet=false
            choice.result=value
            this.serviceType=value
        },
        selectImg(){
            var input=this.$refs['file']
            input.click()
        },
        selectFile(){
            var input=this.$refs['file']

            var file=input.files[0]
            this.files.push(file)

            var reader=new FileReader()
            var imgs=this.purchaseImgs
            reader.onload=function(e){
                imgs.push(e.target.result)
            }
            reader.readAsDataURL(file)
        },
        deleteImg(index){
            this.purchaseImgs.splice(index)
        },

        release(){
            var formData=new FormData()
            formData.append('name',this.name)
            formData.append('type',this.serviceType)
            formData.append('phone',this.phone)
            formData.append('detail',this.detail)
            formData.append('avg_price',this.price)
            formData.append('attachmentType',0)
            formData.append('attachment',files)

            this.$axios.post('/api/shop/post',formData,{
                headers:{
                    'Content-Type':'multipart/form-data',
                    'Authorization':''
                }
            }).then(response=>{
                    console.log(response);
                    var res=response['data']['data']['shopId']
                    this.$router.push('peripheral-services/'+res+'/services-details');              
            })
            .catch({
                function(response){
                    alert(response)
                }
            })
    }
}
</script>


<style scoped>
    .purchase_content{
        border: solid 2px #eeeeee;
        border-radius:2px;
        padding:10px;
        background:white;
    }
    .purchase_content:hover{
        border: solid 2px green
    }
    .purchase>>> .v-input__control .v-input__slot{
        border:none
    }
</style>

